<template>
	<view class="content">
		<view class="my-header">
			<view class="my-header__background" @click="tologin">
				<image v-if="showImg" :src="user.avatar_text ? user.avatar_text : '/static/user.png'" mode="aspectFill"></image>
				<image v-else :src="user.avatar_text ? user.avatar_text : '/static/userout.png'" mode="aspectFill"></image>
			</view>
			<view class="my-header__logo">
				<div class="my-header__log-box" @click="tologin">
					<image @click="toMe" v-if="showImg" :src="user.avatar_text ? user.avatar_text : '/static/user.png'" mode="aspectFill"></image>
					<image v-else :src="user.avatar_text ? user.avatar_text : '/static/userout.png'" mode="aspectFill"></image>
				</div>
				<text class="my-header__name">{{user.nickname ? user.nickname : '点击登录'}}</text>
			</view>
			<view class="my-header__info">
				<view class="my-header__info-box">
					<text class="my-header__info-title">关注</text>
					<text>{{user.guanzhu_ids ? user.guanzhu_ids : 0}}</text>
				</view>
				<view class="my-header__info-box">
					<text class="my-header__info-title">粉丝</text>
					<text>{{user.fengsi_ids ? user.fengsi_ids : 0}}</text>
				</view>
				<view class="my-header__info-box">
					<text class="my-header__info-title">金币</text>
					<text>{{user.score ? user.score : 0}}</text>
				</view>
			</view>
		</view>

		<view class="my-content">
			
			<view class="my-content__list bottom20" @click="toPay">
				<view class="my-content__list-title">
					<image class="icon-tb" src="/static/center-coin.png"></image>
					<text>金币充值</text>
				</view>
				<uni-icons type="arrowright" size="14" color="#666"></uni-icons>
			</view>

			<view class="my-content__list" @click="toMyArticle">
				<view class="my-content__list-title">
					<image class="icon-tb" src="/static/center-fabu.png"></image>
					<text>我的发布</text>
				</view>
				<uni-icons type="arrowright" size="14" color="#666"></uni-icons>
			</view>

			<view class="my-content__list bottom20" @click="toMyCollect">
				<view class="my-content__list-title">
					<image class="icon-tb" src="/static/center-shoucang.png"></image>
					<text>我的收藏</text>
				</view>
				<uni-icons type="arrowright" size="14" color="#666"></uni-icons>
			</view>
			
			<view class="my-content__list" @click="toMyOrder">
				<view class="my-content__list-title">
					<image class="icon-tb" src="/static/center-order.png"></image>
					<text>产品订单</text>
				</view>
				<uni-icons type="arrowright" size="14" color="#666"></uni-icons>
			</view>
			<view class="my-content__list bottom20" @click="toPayOrder">
				<view class="my-content__list-title">
					<image class="icon-tb" src="/static/center-payorder.png"></image>
					<text>充值订单</text>
				</view>
				<uni-icons type="arrowright" size="14" color="#666"></uni-icons>
			</view>

			<view class="my-content__list" @click="toFuwu">
				<view class="my-content__list-title">
					<image class="icon-tb" src="/static/center-fuwu.png"></image>
					<text>免责声明</text>
				</view>
				<uni-icons type="arrowright" size="14" color="#666"></uni-icons>
			</view>

			<view class="my-content__list bottom20" @click="toYinsi">
				<view class="my-content__list-title">
					<image class="icon-tb" src="/static/center-yinsi.png"></image>
					<text>隐私保护</text>
				</view>
				<uni-icons type="arrowright" size="14" color="#666"></uni-icons>
			</view>

			<view class="my-content__list" @click="toTelKefu">
				<view class="my-content__list-title">
					<image class="icon-tb" src="/static/center-kefu.png"></image>
					<text>在线客服</text>
				</view>
				<uni-icons type="arrowright" size="14" color="#666"></uni-icons>
			</view>
			<view class="my-content__list bottom20" @click="feedback">
				<view class="my-content__list-title">
					<image class="icon-tb" src="/static/center-yijian.png"></image>
					<text>意见反馈</text>
				</view>
				<uni-icons type="arrowright" size="14" color="#666"></uni-icons>
			</view>

			<view class="my-content__list bottom20" @click="outSystem">
				<view class="my-content__list-title">
					<image class="icon-tb" src="/static/center-layout.png"></image>
					<text>注销登录</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				user: {}
			}
		},
		computed: {
			...mapState(['userinfo']),
			...mapState(['notSeeCommentNum']),
			showImg: function() {
				if (this.userinfo) {
					return true
				} else {
					return false
				}
			}
		},
		watch: {
			// 检测userinfo的变化
			userinfo(newVal) {
				//userinfo 变好了
				console.log('watch userinfo变化了')

				if (newVal) {
					// 如果 newVal 不为空,说明刚刚是登录了
					this.user = this.userinfo
				} else {
					// 如果 newVal 为空,表示刚刚是退出了
					this.user = {}

					this.$store.dispatch('clear_userinfo')
				}
			}
		},
		methods: {
			// 根据id刷新用户
			getUserById() {
				this.$api.get_user_by_id({
					'id': this.userinfo.id
				}).then(res => {
					if(res.code == 1){
						this.user = res.data
						// 把登录信息赋值给 vuex 中的 userinfo
						this.$store.dispatch('set_userinfo', res.data)
					}
				})
			},
			//打开个人信息页面
			toMe(){
				//未登录检测,跳转到登录页面
				if (!this.userinfo) {
					this.login()
					return
				}
				uni.navigateTo({
					url: '/pages/me/me'
				})
			},
			//打开充值页面
			toPay(){
				//未登录检测,跳转到登录页面
				if (!this.userinfo) {
					this.login()
					return
				}
				uni.navigateTo({
					url: '/pages/pay/pay'
				})
			},
			//打开意见反馈页面
			feedback() {
				//未登录检测,跳转到登录页面
				if (!this.userinfo) {
					this.login()
					return
				}
				uni.navigateTo({
					url: '/pages/feedback/feedback'
				})
			},
			//我的钱包
			toMyWallet(){
				//未登录检测,跳转到登录页面
				if (!this.userinfo) {
					this.login()
					return
				}
				uni.navigateTo({
					url: '/pages/center/my-wallet/my-wallet'
				})
			},
			//拨打电话
			toTelKefu() {
				uni.makePhoneCall({
					phoneNumber: '025-86193272' //仅为示例
				});
			},
			//服务协议
			toFuwu(){
				//未登录检测,跳转到登录页面
				if (!this.userinfo) {
					this.login()
					return
				}
				uni.navigateTo({
					url: '/pages/center/fuwu/fuwu'
				})
			},
			//隐私保护
			toYinsi(){
				//未登录检测,跳转到登录页面
				if (!this.userinfo) {
					this.login()
					return
				}
				uni.navigateTo({
					url: '/pages/center/yinsi/yinsi'
				})
			},
			//我的文章
			toMyArticle() {
				//未登录检测,跳转到登录页面
				if (!this.userinfo) {
					this.login()
					return
				}
				uni.navigateTo({
					url: '/pages/center/my-article/my-article'
				})

			},
			//我的收藏
			toMyCollect() {
				//未登录检测,跳转到登录页面
				if (!this.userinfo) {
					this.login()
					return
				}
				uni.navigateTo({
					url: '/pages/center/my-collect/my-collect'
				})
			},
			//产品订单
			toMyOrder() {
				//未登录检测,跳转到登录页面
				if (!this.userinfo) {
					this.login()
					return
				}
				uni.navigateTo({
					url: '/pages/center/my-order/my-order'
				})
			},
			//充值订单
			toPayOrder() {
				//未登录检测,跳转到登录页面
				if (!this.userinfo) {
					this.login()
					return
				}
				uni.navigateTo({
					url: '/pages/center/pay-order/pay-order'
				})
			},
			//退出系统
			outSystem() {
				//未登录检测,跳转到登录页面
				if (!this.userinfo) {
					this.login()
					return
				}
				const _this = this
				uni.showModal({
					title: '确定退出吗?',
					success(res) {
						if (res.confirm) {

							// 重置用户信息
							_this.user = {}
							_this.$store.dispatch('clear_userinfo')

						} else if (res.cancel) {
							console.log("取消")
						}
					}
				})
			},
			//跳转到登录页面
			login() {
				uni.redirectTo({
            url: '/pages/login/login?reffer=' + window.location.href
				});
			},
			//点击头像
			tologin() {

				//未登录检测,跳转到登录页面
				if (!this.userinfo) {
					this.login()
					return
				}
			}

		},
		onShow() {			
			//未登录检测,跳转到登录页面
			if (!this.userinfo) {
				uni.showModal({
					content: '请先微信登录',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
                  url: '/pages/login/login?reffer=' + window.location.href
							})
						} else if (res.cancel) {
							uni.switchTab({
								url: '/pages/tabbar/index/index'
							})
						}
					}
				});
			
				return
			}
			
			// 刷新 userinfo
			this.getUserById();

			// 如果用户不存在,则跳到登录页面
			if (this.userinfo) {
				this.user = this.userinfo
			}
			
			// 分享
			this.shareWx('', '个人中心')
			
			const that = this
			if(that.userinfo){
				// 监听文章发送事件
				that.$api.getNotSeeCommentNum({
					user_id: that.userinfo.id
				}).then( result => {
					// 把登录信息赋值给 vuex 中的 notSeeCommentNum
					that.$store.dispatch('set_notseecommentnum', result)
					
					var count = that.notSeeCommentNum
					
					if(count > 99){
						count = '99+';
					}
					
					// uni.setTabBarBadge({
					// 	index: 3,
					// 	text: String(count)
					// })
				}).catch( err => {
					console.log(err)
				})
			}
			


		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.my-header {
		position: relative;
		padding-bottom: 15px;

		.my-header__background {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			filter: blur(8px);
			opacity: 0.3;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.my-header__logo {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 30px;

			.my-header__log-box {
				width: 60px;
				height: 60px;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}

			}

			.my-header__name {
				margin-top: 15px;
				font-size: 16px;
				font-weight: bold;
			}
		}

		.my-header__info {
			margin-top: 15px;
			display: flex;

			.my-header__info-box {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 100%;
				font-size: 12px;
				color: #999;

				.my-header__info-title {
					font-size: 14px;
					color: #333;
				}
			}
		}
	}

	.my-content {
		.my-content__list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 6px 15px;

			background-color: #fff;
			color: #333;
			font-size: 14px;

			&.bottom20 {
				margin-bottom: 10px;
			}

			.my-content__list-title {
				display: flex;
				align-items: center;

				.icon-tb {
					width: 18px;
					height: 18px;
					margin: 10px;
				}

				.icons {
					margin-right: 5px;
				}
			}
		}
	}
</style>
